<template>
  <div class="search-box">
    <div class="key-word">
      <img class="icon" :src="searchIcon" alt="">
      <input type="text"  class="input"
          v-model="keyword" 
          :placeholder="placeholder"
          @compositionstart='compositionstart'
          @compositionend='compositionend'
          @input='searchHander'
        />
    </div>
    <div class="cancle" v-show="keyword">取消</div>
  </div>
</template>

<script>
export default {
  props: {
    city: {
      type: String, 
      default: ''
    },
    placeholder: {
      type: String, 
      default: '请输入关键字'
    }
  },
  data () {
    return {
      searchIcon: require('PIC/search/search.png'),
      keyword: '',
      composing: true
    }
  },
  methods: {
    compositionstart () {
      this.composing = true
    },
    compositionend () {
      this.composing = false
      this.searchHander()
    },
    searchHander () {
      if (this.composing) return false
      this.$emit('changeKeyword', this.keyword)
    }
  }
}
</script>

<style lang="less" scoped>
.search-box{
  height: 30px;
  width: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  .key-word{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 10px;
    background:rgba(242,246,247,1);
    border-radius:6px;
    .icon{
      width: 24px;
      height: 24px;
    }
    .input{
      flex: 1;
      border: none;
      background-color: transparent;
      height: 24px;
      &::placceholder{
        color: #969EA8;
      }
    }
    
  }
  .cancle{
    width: 50px;
    text-align: center;
    color: #999;
  }
}
</style>
